CSS - 盒子模型

发表于   |   分类于   |  

在网页中，元素可以视作可以产生矩形的框，这些框会影响元素之间的距离，元素内容的距离等。盒子模型的概念是将网页视作一个个盒子，每个盒子用来放网页中的各种元素。比如图片，文字等元素，都可以视为盒子，这些盒子可以用更大的盒子 <div> 进行嵌套。将这些盒子进行嵌套，叠加，排列，最后就成为了网页。

盒子模型

width

如上图所示，height 和 width 是指元素本身的宽和高，宽度的值可以是数值和百分比以及 auto，与宽度有关的还有以下两个属性：

属性 描述
min-width 最大宽度
max-width 最小宽度

最小和最大宽度，主要是为了防止页面变形，比如一个页面的宽度设置为百分比，这时此页面的宽度会根据浏览器的宽度而定，但如果浏览器的宽度过小，页面就会变形。

例如百分比设置的页面，浏览器窗口宽度被缩小成 100px 宽度，如果设定了 min-width:780px，那么网页会正常显示，只不过有一部分看不到。同理，max-width 也是如此，现在大多显示都是宽屏的，如果不想页面铺满全屏或各模块的间隔过大，就可以通过最大宽度进行限制。

height

height 和 width 的值时一样的，而且同样有两个属性：

属性 描述
min-height 最大高度
max-height 最小高度

我们有时设置一个对象盒子时候避免对象没有内容时候不能撑开，但内容多少不能确定所以又不能固定高度，这个时候我们就会需要设置 min-height 最小高度撑高对象盒子。当内容少时候最小高度能将内容显示出，如果内容多余最小高度能装下时候，对象也会再随内容增多而增高。

max-height 此属性很少使用，可能是为了避免内容太多将高度撑太高影响布局美化统一，这个时候我们设置最大高度限制。比如一个 table tr td 表格对象里装一个图片，而图片高度不确定，如果太高了不想图片撑破 tr td 表格，这个时候通过 max-height 限制图片最大高度是有必要的。

需要注意的是，如果 max 小于 min 时，元素会优先使用 min-height，宽度也是如此。

支持 height 和 width 的元素

块级元素支持 height 和 width 属性，而行内元素不支持。此外，替换元素也支持 height 和 width 属性，那么是替换元素呢？

替换元素

替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。

比如：<input /> type="text" 时，这是一个文本输入框，换一个其他的时候，浏览器显示就不一样。

HTML中的 <img>、<input>、<textarea>、<select>、<object> 都是替换元素，这些元素都没有实际的内容。

非替换元素

HTML 的大多数元素是不可替换元素，他们将内容直接告诉浏览器，将其显示出来。比如：

1
<p>wanmei.com</p>

浏览器将把这段内容直接显示出来。

boder

属性 描述
boder-width 边框宽度
boder-color 边框颜色
boder-style 边框样式

padding

padding 属性是指元素内容到元素边框的距离。padding 可以通过四个方向表示对应的内边距：

属性 描述
padding-left 左内边距
padding-right 右内边距
padding-top 顶内边距
padding-bottom 底内边距

它们的值可以是长度值和百分比，但不能是负值。盒子在网页中所占用的空间，不单与 height 和 width 属性有关，还与 padding 属性有关。

margin

margin 属性用于设定元素与元素之间的距离，即外边距，margin 同样有四个方向：

属性 描述
margin-left 左外边距
margin-right 右外边距
margin-top 顶外边距
margin-bottom 底外边距

与 padding 不同的是，margin 的值可以是负数。默认情况下，下面这些元素是存在外边距的，为了不受默认边距的影响，我们经常会去掉他们的边距：

1
2
3
body, h1, h2, h3, h4, h5, h6, p {
  margin: 0px;
}

margin 还有一个特殊的值 auto，这个值会使元素在父元素中水平居中。

需要注意的是，两个元素之间的外边距，不会相加，而是取其中较大的一个，作为彼此的间距。

display

display 属性用于设置元素是内联元素还是块级元素，它有以下两个值：

1
2
3
4
5
6
7
inline:元素将显示为内联元素，元素前后没有换行
block:元素将显示为块级元素，元素前后会带有换行
inline-block:行内块元素，元素呈现为 inline，但具有 block 相应的特性
none:元素不会被显示

需要注意的是，内联元素和使用 display: inline 设定为内联的元素，width 和 height 无效，水平方向的 margin 和 padding 有效，垂直无效。

块级元素和行内块元素，垂直和水平的 margin 和 padding 均有效。

CSS 交互效果

之前我们已经了解过，当鼠标移过时可以通过 :hover 伪类捕捉事件并修改元素，那么一个元素的事件如何修改另一个元素呢？如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>display属性</title>
  <style type="text/css">
    ul {
      width: 200px;
    }
    li {
      display: none;
    }
    ul:hover li {
      color: red;
      display: inline;
    }
  </style>
</head>
<body>
  <ul>
    <h2>家电</h2>
    <li>冰箱</li>
    <li>空调</li>
    <li>洗衣机</li>
  </ul>
</body>
</html>

在这个例子中，li 标签默认隐藏，当鼠标移动到 ul 上面时，li 标签会以行内元素显示。

需要注意的是，这种事件只能修改自己的子元素，兄弟元素和父级元素无法通过这种方式修改。